<template>
<div style="padding: 20px;">
<h3>销售统计（最近7天）</h3>
<div ref="chart" style="width: 100%; height: 400px;"></div>
</div>
</template>

<script>
import * as echarts from 'echarts'

export default {
data() {
return {
sales: [
{ date: '05-21', amount: 1200 },
{ date: '05-22', amount: 1800 },
{ date: '05-23', amount: 1500 },
{ date: '05-24', amount: 2200 },
{ date: '05-25', amount: 2000 },
{ date: '05-26', amount: 2500 },
{ date: '05-27', amount: 2700 }
]
}
},
mounted() {
const chart = echarts.init(this.$refs.chart)
chart.setOption({
title: { text: '每日销售额', left: 'center' },
tooltip: { trigger: 'axis', formatter: p => `${p[0].axisValue}<br/>￥${p[0].data}` },
xAxis: { type: 'category', data: this.sales.map(i => i.date) },
yAxis: { type: 'value', axisLabel: { formatter: '￥{value}' } },
series: [
{
data: this.sales.map(i => i.amount),
type: 'bar',
barMaxWidth: 40,
itemStyle: { color: '#409EFF' }
}
]
})
window.addEventListener('resize', () => chart.resize())
}
}
</script>

<style scoped>
h3 {
margin-bottom: 20px;
}
</style>